<template>
  <div class="list-table flex">
    <div class="left">
      <el-tree
        ref="tree"
        :data="treeData"
        :props="defaultProps"
        highlight-current
        default-expand-all
        :expand-on-click-node="true"
        :current-node-key="'1-1'"
        :indent="10"
        node-key="id"
        @node-click="nodeClick"
      >
        <span slot-scope="{ node }" class="config-tree-node">
          <span><i class="el-icon-fold" /><p :title="node.label">{{ $t(node.label) }}</p></span>
          <el-dropdown v-if="node.level === 1">
            <span class="el-dropdown-link">
              <i class="iconfont icon--more" />
            </span>
            <el-dropdown-menu slot="dropdown" class="dropdown-more">
              <el-dropdown-item><span>{{ $t('新增') }}</span></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </span>
      </el-tree>
    </div>
    <div class="right dataForm">
      <el-table tooltip-effect="darkTable" :max-height="tableHeight" :data="dataList" border>
        <el-table-column :label="$t('字段名称')" prop="name" width="300" />
        <el-table-column :label="$t('字段类型')" prop="type" width="230">
          <template slot-scope="scope">
            <el-select v-model="scope.row.type" size="small" :clearable="false">
              <el-option v-for="v in selectOption" :key="v.value" :value="v.value" :label="v.label" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column :label="$t('是否必填')" prop="isRequired" width="120" />
        <el-table-column :label="$t('数据来源')" prop="source" />
        <el-table-column :label="$t('字典/日期格式')" prop="layout" />
        <el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width" width="100">
          <template slot-scope="">
            <el-button
              size="small"
              type="text"
              icon="el-icon-delete"
            />
          </template>
        </el-table-column>
      </el-table>
      <div class="tol">
        <el-button type="primary" icon="el-icon-plus" size="mini">{{ $t('新增') }}</el-button>
      </div>
      <div class="mt10" style="position: absolute;right: 0px;bottom: 0;">
        <el-button type="primary" size="small">{{ $t('保存') }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import innerHeight from '@/mixins/innerHeight'
export default {
  mixins: [innerHeight],
  data() {
    return {
      treeData: [
        {
          id: '1',
          label: '管理人信息',
          children: [
            { id: '1-1', label: '基本信息' },
            { id: '1-2', label: '核心团队' },
            { id: '1-3', label: '再管基金' },
            { id: '1-4', label: '已投项目' },
            { id: '1-5', label: '历史业绩' }
          ]
        },
        {
          id: '2',
          label: '基金信息',
          children: [
            { id: '2-1', label: '基本信息' },
            { id: '2-2', label: '出资人信息' },
            { id: '2-3', label: '基金估值' },
            { id: '2-4', label: '投后会议' },
            { id: '2-5', label: '信息披露' }
          ]
        },
        {
          id: '3',
          label: '项目信息',
          children: [
            { id: '3-1', label: '基本信息' },
            { id: '3-2', label: '融资历史' },
            { id: '3-3', label: '股东变更' },
            { id: '3-4', label: '财务管理' },
            { id: '3-5', label: '项目回款' },
            { id: '3-6', label: '项目估值' },
            { id: '3-7', label: '项目划款' }
          ]
        }
      ],
      defaultProps: {
        label: 'label',
        children: 'children'
      },
      selectOption: [
        { label: '文本', value: '0' },
        { label: '下拉框', value: '1' },
        { label: '日期', value: '2' },
        { label: '多行文本', value: '3' },
        { label: '金额', value: '4' }
      ],
      dataList: [
        { name: '公司名称', type: '0', isRequired: '是', source: '', layout: '' },
        { name: '公司简称', type: '0', isRequired: '是', source: '', layout: '' },
        { name: '企业统一社会信用代码', type: '0', isRequired: '是', source: '', layout: '' },
        { name: '法人代表', type: '0', isRequired: '是', source: '', layout: '' },
        { name: '一级行业', type: '1', isRequired: '是', source: '字典', layout: '一级行业' },
        { name: '二级行业', type: '1', isRequired: '是', source: '数据源', layout: '二级行业' },
        { name: '注册地-省', type: '1', isRequired: '是', source: '数据源', layout: '省' },
        { name: '注册地-市', type: '1', isRequired: '是', source: '数据源', layout: '市' },
        { name: '注册地-区', type: '1', isRequired: '是', source: '数据源', layout: '区' },
        { name: '注册详细地址', type: '0', isRequired: '', source: '', layout: '' },
        { name: '成立时间', type: '2', isRequired: '', source: '', layout: '' },
        { name: '注册资本(万)', type: '4', isRequired: '', source: '', layout: '' },
        { name: '注册资本币种', type: '1', isRequired: '', source: '字典', layout: '币种' },
        { name: '实收资本(万)', type: '4', isRequired: '', source: '', layout: '' },
        { name: '实收资本币种', type: '1', isRequired: '', source: '字典', layout: '币种' },
        { name: '上市情况', type: '1', isRequired: '', source: '字典', layout: '上市情况' },
        { name: '上市板块', type: '1', isRequired: '', source: '字典', layout: '上市情况' },
        { name: '股票代码', type: '1', isRequired: '', source: '', layout: '' },
        { name: '备注', type: '3', isRequired: '', source: '', layout: '' }
      ]
    }
  },
  computed: {
    tableHeight() {
      return this.innerHeight - 250
    }
  },
  created() {
  },
  methods: {
    nodeClick(ev) {
      console.log(ev)
      if (ev.id === '1-2') {
        this.dataList = [
          { name: '管理人名称', type: '0', isRequired: '是', source: '', layout: '' },
          { name: '年份', type: '2', isRequired: '是', source: '', layout: '' },
          { name: '报告期类型', type: '1', isRequired: '是', source: '', layout: '' },
          { name: '提交时间', type: '2', isRequired: '是', source: '', layout: '' },
          { name: '审核状态', type: '1', isRequired: '是', source: '', layout: '' },
          { name: '审核人', type: '1', isRequired: '是', source: '', layout: '' }
        ]
      } else if (ev.id === '1-1') {
        this.dataList = [
          { name: '公司名称', type: '0', isRequired: '是', source: '', layout: '' },
          { name: '公司简称', type: '0', isRequired: '是', source: '', layout: '' },
          { name: '企业统一社会信用代码', type: '0', isRequired: '是', source: '', layout: '' },
          { name: '法人代表', type: '0', isRequired: '是', source: '', layout: '' },
          { name: '一级行业', type: '1', isRequired: '是', source: '字典', layout: '一级行业' },
          { name: '二级行业', type: '1', isRequired: '是', source: '数据源', layout: '二级行业' },
          { name: '注册地-省', type: '1', isRequired: '是', source: '数据源', layout: '省' },
          { name: '注册地-市', type: '1', isRequired: '是', source: '数据源', layout: '市' },
          { name: '注册地-区', type: '1', isRequired: '是', source: '数据源', layout: '区' },
          { name: '注册详细地址', type: '0', isRequired: '', source: '', layout: '' },
          { name: '成立时间', type: '2', isRequired: '', source: '', layout: '' },
          { name: '注册资本(万)', type: '4', isRequired: '', source: '', layout: '' },
          { name: '注册资本币种', type: '1', isRequired: '', source: '字典', layout: '币种' },
          { name: '实收资本(万)', type: '4', isRequired: '', source: '', layout: '' },
          { name: '实收资本币种', type: '1', isRequired: '', source: '字典', layout: '币种' },
          { name: '上市情况', type: '1', isRequired: '', source: '字典', layout: '上市情况' },
          { name: '上市板块', type: '1', isRequired: '', source: '字典', layout: '上市情况' },
          { name: '股票代码', type: '1', isRequired: '', source: '', layout: '' },
          { name: '备注', type: '3', isRequired: '', source: '', layout: '' }
        ]
      } else {
        this.dataList = []
      }
    }

  }
}
</script>
<style lang="scss" scoped>
.flex{
  display: flex;
  column-gap: 20px;
  height: calc(100vh - 120px);
  .left{
    box-shadow: 0px 0px 4px 0px #001AA31A;
    padding: 10px;
    padding-right: 0;
    border-radius: 5px;
    width: 180px;
    min-width: 180px;
    max-width: 180px;
    overflow: auto;
    /deep/.el-tree{
      font-size: 14px;
      color: #606266;
      .el-tree-node__content{
        height: 30px;
        width: 100%;
      }
      .el-tree-node.is-current{
        >.el-tree-node__content>.config-tree-node{
          color: #434EB8;
        }
      }
      .config-tree-node {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        overflow: hidden;
        span{
          display: flex;
          align-items: center;
          overflow: hidden;
          p{
            margin: 0;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
      .el-icon-fold{
        height: 15px;
        width: 15px;
        min-width: 15px;
      }
      .icon--more{
        font-weight: bold;
        font-size: 23px;
      }
    }
  }
  .right{
    flex: 1;
    width: calc(100% - 190px);
    position: relative;
  }
}
</style>
